<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='popup.css' />
<link rel='stylesheet' type='text/css' href='jquery-ui-1.9.1.custom.css' />
<link rel='stylesheet' type='text/css' href='jquery-ui-1.9.1.custom.min.css' />
<script type='text/javascript' src='../jquery/jquery-1.8.2.js'></script>
<script type='text/javascript' src='../jquery/jquery-ui-1.9.1.custom.js'></script>
<script type='text/javascript' src='../jquery/jquery-ui-1.9.1.custom.min.js'></script>
<script type='text/javascript' src='../jquery/datetimepicker.js'></script>
<script type='text/javascript' src='../fullcalendar/fullcalendar.js'></script>


<style type='text/css'>

	body {
		margin-top: 40px;
		text-align: center;
		font-size: 14px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		}

	#calendar {
		width: 900px;
		margin: 0 auto;
		}

</style>
</head>
<body>
<select class="room" style="">
	<option id="0" value="0">--Select Room--</option>
	<?php
	for($a=1;$a<3;$a++){
	    ?>
	    <option id="<?php echo base64_encode($a) ?>" value="<?php echo $a ?>">Room <?php echo $a ?></option>
	    <?php
	}
	?>
</select>
<?php
if(isset($_GET['room'])){
	?>
	<h1><?php echo "ROOM ".base64_decode($_GET['room']); ?></h1>
	<div id='calendar'></div>
	<?php
}
?>

<span id="load"></span>
<div id="drag" class="ui-widget-content" >
	<form id="jform" method="post">
		<div class="divider"></div>
			<div class="heads"><label id="head_title"></label> <img src="cross.png" class="popupContactClose" id="popupContactClose"/></div>
		<div class="divider"></div>
		<div id="popUppanel">
		<span id="result"></span>
		<p>
		    <label>Title:</label>
		    <input type="text" name="title" id="title" value="" maxlength=10 />
		</p>
		<p>
		    <label>Description:</label>
		    <textarea class="desc"></textarea>
		</p>
		<p id="checkIn">
			
		</p>
		    
		</p>
		<div class="divider" style="margin-bottom:10px;"></div>
		<input type="button" id="enter" name="enter" class="submit" value="Save" />
		</div>
	</form>
</div>
<div class="tooltipInfo"></div>
</body>
</html>
<script type='text/javascript'>
	$(document).ready(function() {
		$(".room").change(function(){
			var room_id = $(this).find('option:selected').attr('id');
			window.location="selectable.php?room="+room_id+"";
		})
		<?php
		if(isset($_GET['room'])){
			$id = $_GET['room'];
			//retain value for the select box
			?>
			$(".room").val("<?php echo base64_decode($id) ?>").attr("selected","selected");
			<?php
		}
		?>
		var room = 0;
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		var ctr_click = 0;
		var event_id = 0;
		var room = "<?php echo $_GET['room'];?>";
		var calendar = $('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			selectable: true,
			selectHelper: true,
			select: function(start, end, allDay) {
				//to show dialog box
				$("#drag").show();
				$("#dates").empty();
				$("#notLoadInAdd").empty();
				$("#drag").draggable({handle:'.head'},{containment:'.container'});
				//clear value of textbox
				$("#title").val("");
				$(".desc").val("");
				//update header of dialog box
				$("#head_title").text("Add Reservation");
				
				//setting the position of cursor to title textbox
				$("#title").focus();
				//for saving to database
				$("#enter").click(function(){
					title = $("#title").val();
					//alert(title.length)
					if(title.length==0){
						alert("Please Input Title");
					}else{
						calendar.fullCalendar('renderEvent',
							{
								title: title,
								start: start,
								end: end,
								allDay: allDay
							},
							true  //make the event "stick"
						);
						//ajax save to database
						functions = "save";
						description = $(".desc").val();
						room_id = $(".room").val();
						$.post("ajax.php",{"functions":functions,"title":title,"start":start,"end":end,"allDay":allDay,"room_id":room_id,"description":description},function(data){
							$("#load").html(data)
						})
						//for clearing the form
						$("#title").val("");
					}
				})// end of click function
				calendar.fullCalendar('unselect');
			},
			
			editable: true,
			events: "json-events.php?room="+room+"",
			
			eventDrop: function(event, delta) {
				functions = "update";
				//alert(event.end)
				$.post("ajax.php",{"functions":functions,"title":event.title,"start":event.start,"end":event.end,"id":event.id,"allDay":event.allDay},function(data){
					//$("#load").html(data)
				})
			},
			eventResize: function(event, delta) {
				functions = "update";
				$.post("ajax.php",{"functions":functions,"title":event.title,"start":event.start,"end":event.end,"id":event.id,"allDay":event.allDay},function(data){
					//$("#load").html(data)
				})
			},
			eventMouseover: function(event){
				if(event_id!=event.id){
					/*$("#edbut"+event.id).live("click",function(){
						//running edit
						functions = "updateTitle";
						$.post("ajax.php",{"functions":functions,"title":"bbb","id":event.id},function(data){
							$("#load").html(data)
							$("#editTitle_"+event.id).html("bbb");
						})
						//window.location.reload(true);
						//$("body").load("selectable.php").fadeIn('fast');
					})
					$("#delbut"+event.id).live("click",function(){
						//running delete
						var con = confirm("Are you sure?")
						if(con){
							functions = "delete";
							$.post("ajax.php",{"functions":functions,"id":event.id},function(data){
								$("#load").html(data)
							})
							//window.location.reload(true);
							
							$(this).parents("#delete_"+event.id).animate({backgroundColor: "#fbc7c7"}, "fast")
							.animate({opacity: "hide"}, "fast");
						}
					})*/
					
					$(".delbut").live("click",function(){
						if(ctr_click==0){
							//alert(this.id)
							id = $(this).attr("id");
							var con = confirm("Are you sure?");
							if(con){
								functions = "delete";
								$.post("ajax.php",{"functions":functions,"id":id},function(data){
									$("#load").html(data)
								})
								//$("body").load("selectable.php").fadeIn('slow');
								//$(this).parents("#delete_"+event.id).animate({backgroundColor: "#fbc7c7"}, "fast")
								//.animate({opacity: "hide"}, "fast");
								//$(this).parents("#delete_"+event.id).fadeOut();
							}
						}
						ctr_click++;
					})
					$(".editbut").live("click",function(){
						//running edit
						$("#drag").show();
						$("#drag").css({
							"z-index":"20000"
						});
						$("#drag").draggable({handle:'.head'},{containment:'.container'});
						$("#head_title").text("Update Reservation");
						functions = "updateTitle"; //declaring function to ajax update title
						id = this.id; //id of element
						getVal = 1; //declaring function to ajax get value
						$.post("ajax.php",{getVal:getVal,id:id},function(data){
							$("#load").html(data)
						})
						//ajax edit to database
						$("#enter").click(function(){
							startDate = $(".ssDate").val();
							endDate = $(".eeDate").val();
							allday = "false";
							if($("#allday").attr("checked")){
								allday = "true";
							}
							if(startDate=="" || endDate==""){
								alert("Pls. indicate start date or end date")
							}else{
								if($("#stat_id").attr("checked")){
									checkInStatus = $("#stat_id").val()
								}else{
									checkInStatus = $("#stat_id").attr("rel");
								}
								//alert(checkInStatus)
								description = $(".desc").val();
								title = $("#title").val()
								$.post("ajax.php",{"description":description,"functions":functions,"title":title,"id":id,"checkInStatus":checkInStatus,"startDate":startDate,"endDate":endDate,"allDay":allday},function(data){
									$("#load").html(data)
									//$("#editTitle_"+event.id).html("bbb");
								})
							}
						})
					})
					$(".maximize").live("click",function(){
						//if(ctr_click==0){
							id = this.id.substr(3,this.id.length);
							$(".tooltipInfo").html('<div id="tooltipNiSite"></div>');
							var ele = $(this);
							var tooltip = $('.tooltipInfo');
							var pos = ele.offset();
							tooltip.css({
								top: pos.top-90,
								left: pos.left-120+ele.width(),
							});
							$.post("ajax.php",{description:id},function(data){
								$("#tooltipNiSite").html(data);
							})
							$(".tooltipInfo").fadeIn("fast");
						//}
						//alert(ctr_click)
					});
					$("#closeTool").live("click",function(){
						$("#tooltipNiSite").fadeOut();
					})
				}
				event_id = event.id
			}
		});
		
		$("#popupContactClose").click(function(){
			$(this).parent().parent().parent().fadeOut();
			//for clearing the form
			$("#title").val("");
		});
		$("#toolClose").click(function(){
			$(this).parent().fadeOut();
			//for clearing the form
			$("#title").val("");
		});
	});
</script>
